<template>
	<div class="bg  weui-panel">
		<div class="weui-cell">
			<button class="backBtn" @click="goBack">返回</button>
		</div>
		<div class="weui-cells">

			<div v-for="(val,index) in cases" @click="seeDetail(val)"
				class="weui-media-box weui-media-box_text weui-cell_active">
				<h4 class="weui-media-box__title">{{val.caseName}}</h4>
				<p class="weui-media-box__desc">{{val.caseDesc}}</p>
				<ul class="weui-media-box__info">
					<li class="weui-media-box__info__meta" style="float: none;">开始时间:{{val.caseStartTime}}</li>
					<li class="weui-media-box__info__meta" style="float: none;">结束时间:{{val.caseEndTime}}</li>
					<!-- <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li> -->
				</ul>
			</div>
		</div>
		<showCaseDetailMsg :title="title" :showObject="showStaffCaseObj" :showstate='showMsgFlag'></showCaseDetailMsg>
	</div>
</template>

<script>
	import uwLoadJs from '@/utils/uwLoad'
	import constant from '@/utils/constant'
	import apis from '@/utils/apis'
	import showCaseDetailMsg from '@/page/child/showCaseDetailMsg'
	import {
		getCaseListDetail
	} from '@/apis/tech/tech'
	export default {
		components: {
			showCaseDetailMsg
		},
		data() {
			return {
				cases: [],
				userInfo: {},
				account: '',
				showMsgFlag: false,
				showStaffCaseObj: {},
				title: '上课信息',
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.account = this.$route.params.account
			this.getCaseList();
		},
		methods: {
			seeDetail(item) {
				this.showMsgFlag = true,
					this.showStaffCaseObj = item;
			},
			cancle() {
				this.showMsgFlag = false,
					this.showStaffCaseObj = {};
			},
			goBack() {
				this.$router.go(-1);
			},
			getCaseList() {
				this.cases = [];
				if (!this.account) {
					this.account = '';
				}
				let url = apis.getCaseListDetail + "?account=" + this.account;
				getCaseListDetail(url).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						this.cases = res.data;
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	@import "/src/assets/css/returnBtn.css";

	.backBtn {
		width: 3.125rem;
		display: block;
		text-align: center;
		line-height: 100%;
		padding: 0.3em;
		font: 16px Arial, sans-serif bold;
		font-style: normal;
		text-decoration: none;
		margin: 2px;
		vertical-align: text-bottom;
		zoom: 1;
		outline: none;
		font-size-adjust: none;
		font-stretch: normal;
		border-radius: 50px;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
		color: #fefee9;
		border: 0.2px solid #2299ff;
		background-repeat: repeat;
		background-size: auto;
		background-origin: padding-box;
		background-clip: padding-box;
		background-color: #3399ff;
		background: linear-gradient(to bottom, #eeeff9 0%, #3399ff 100%);
	}
</style>
